<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 修饰符，lazy，number -->
    <label for="name">名称：
        <input id="name" v-model.lazy="book.name">
    </label>
    <h2>{{book.name}}</h2>
    <br>
    <label>性别：</label>
    <label for="male">
        <input type="radio" id="male" v-model="gender" value="male">男
    </label>
    <label for="female">
        <input type="radio" id="female" v-model="gender" value="female">女
    </label>
    <h2>选择的性别是：{{gender}}</h2>

    <br>
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>选择的是{{isAgree}}</h2>

    <br>
    <!-- check多选框 -->
    <!--<input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球-->
    <br>
    <label v-for="item in originHobbies">
        <input type="checkbox" :value="item" v-model="hobbies">{{item}}
    </label>

    <h2>爱好是{{hobbies}}</h2>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            book:{id:1,name:'算法导论',date:'2006-9',price:85.00,count:1},
            gender:'female',
            sex:'',
            isAgree:false,
            originHobbies:["篮球","足球","乒乓球"],
            hobbies:["篮球"]
        }
    })
</script>
</body>
</html>